<template>
	<view class="gui-padding">

		<gui-page-loading ref="guipageloading">
			<!-- 可以通过插槽添加自定义内容，如 加载提示文本 -->
			<text class="gui-block-text gui-text-small gui-text-center gui-color-gray gui-italic"
				style="padding-top:10rpx;">loading</text>
		</gui-page-loading>

		<view class="gui-margin-top-large"></view>
		<form @submit="submit">

			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">姓名</text>
				<view class="gui-form-body">
					<input type="text" class="gui-form-input" v-model="realname" name="realname" placeholder="请输入姓名" />
				</view>
			</view>
			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">性别</text>
				<view class="gui-form-body">
					<picker mode="selector" :range="gender" @change="pickerChange">
						<view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
							<text class="gui-text">{{gender[genderIndex]}}</text>
							<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
						</view>
					</picker>
				</view>
			</view>

			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">球龄</text>
				<view class="gui-form-body">
					<input type="number" class="gui-form-input" v-model="qiuling" name="qiuling" placeholder="请输入球龄" />
				</view>
			</view>

			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">身份证号</text>
				<view class="gui-form-body">
					<input type="text" class="gui-form-input" v-model="idcard" name="idcard" placeholder="请输入身份证号" />
				</view>
			</view>



			<view class="gui-margin-top">
				<text class="gui-h6 gui-color-gray gui-bold">个人特点</text>
			</view>
			<view class="gui-bg-gray gui-margin-top">
				<textarea v-model="feature" class="gui-text-area" placeholder="请描述个人特点,限150个字" />
			</view>

			<view class="gui-margin-top-large">
				<text class="gui-text gui-color-gray">身份证照片 ( 个人信息面 )</text>
			</view>
			<view class="gui-idcard-items gui-img-in gui-flex gui-rows gui-justify-content-center">
				<view class="gui-idcard-items-image" @tap="selectImg1">
					<gui-image :src="idCard1" :width="380"></gui-image>
				</view>
			</view>

			<view class="gui-margin-top-large">
				<text class="gui-text gui-color-gray">身份证照片 ( 国徽图案面 )</text>
			</view>
			<view class="gui-idcard-items gui-img-in gui-flex gui-rows gui-justify-content-center">
				<view class="gui-idcard-items-image" @tap="selectImg2">
					<gui-image :src="idCard2" :width="380"></gui-image>
				</view>
			</view>


			<view class="gui-margin-top-large gui-flex gui-rows gui-space-between">
				<text class="gui-h6 gui-color-gray gui-bold">生活照</text>
				<text class="gui-bg-blue gui-color-white demo-sub-btn gui-block-text" @tap="submit">{{subtxt}}</text>
			</view>
			<view class="gui-margin-top">
				<gui-upload-images @change="change" ref="uploadimgcom" @uploaded="uploaded"
					:uploadServerUrl="photo_upload_url" maxFileNumber="20"></gui-upload-images>
			</view>


			<view class="gui-margin-top-large gui-flex gui-rows gui-nowrap gui-justify-content-end">
				<button type="default" class="gui-button gui-bg-blue" style="width:200rpx;" formType="submit">
					<text class="gui-icons gui-color-white gui-button-text">提交申请</text>
				</button>
			</view>
			<view style="height:100rpx;"></view>
		</form>
	</view>
</template>
<script>
	var graceChecker = require("@/GraceUI5/js/checker.js");
	export default {
		data() {
			return {
				textareaVal: '',
				subtxt: '',
				// 记录需要上传的图片数据
				needPploadedImgs: [],
				realname: '',
				qiuling: '',
				feature: '',
				idcard: '',
				gender: ['请选择性别', '男', '女'],
				genderIndex: 0,
				idCard1: this.id_card_zheng_img,
				idCard2: this.id_card_fan_img,
				photo_upload_url: this.serverUrl + '/api.common/upload',
				life_photos: [],
				is_upload:1
			}
		},
		onLoad: function(query) {
			this.$globalMethod();
			this.member_identity_info();
		},
		methods: {
			member_identity_info() {
				let _this = this;
				_this.graceJS.get(_this.serverUrl + '/api.member/member_identity_info', {
					identity: 2
				}, {
					token: _this.token
				}, (res) => {
					if (res.code == 0) {
						var member_identity_info = res.data.member_identity_info;
						var member_info = res.data.member_info;
						var teacher_info = res.data.teacher_info;
						var teacher_photos = res.data.teacher_photos;
						// console.log(teacher_photos);

						_this.idcard = member_identity_info.idcard;
						_this.realname = member_info.realname;
						_this.genderIndex = member_info.sex;
						_this.qiuling = teacher_info.qiuling;
						_this.feature = teacher_info.feature;
						_this.idCard1 = member_identity_info.idcard_zheng;
						_this.idCard2 = member_identity_info.idcard_fan;

						if (teacher_photos.length > 0) {
							_this.is_upload = 0;
							var img_arr = [];
							for (var i = 0; i < teacher_photos.length; i++) {
								// var arr = {
								// 	progress: 100,
								// 	url: teacher_photos[i].img_url
								// };
								// // console.log(arr);
								// _this.needPploadedImgs.push(arr);

								img_arr.push(teacher_photos[i].img_url);
							}
							
							_this.$refs.uploadimgcom.setItems(img_arr);
							
							_this.is_upload = 1;

							console.log(img_arr);
							// console.log(_this.needPploadedImgs);
						}

					} 
				}, (e) => {
					uni.showToast({
						title: '网络请求错误，请稍后再试',
						icon: 'none'
					})
				})
			},
			selectImg1: function() {
				let _this = this;
				uni.chooseImage({
					count: 1,
					success: (res) => {
						_this.idCard1 = res.tempFilePaths[0];

						var loading = uni.showLoading({
							title: '上传中',
							mask: true,
						})
						uni.uploadFile({
							url: _this.serverUrl + '/api.common/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'laytpUploadFile',
							header: {
								token: _this.token
							},
							success: (uploadFileRes) => {
								uni.hideLoading();
								var return_data = JSON.parse(uploadFileRes.data);
								console.log(return_data);
								console.log(return_data.code);
								if (return_data.code == 0) {
									_this.idCard1 = return_data.data.path;
								}
							},
							fail: function(e) {
								uni.hideLoading();
								console.log(e);
							}
						});
					}
				})
			},
			selectImg2: function() {
				let _this = this;
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.idCard2 = res.tempFilePaths[0];

						var loading = uni.showLoading({
							title: '上传中',
							mask: true,
						})
						uni.uploadFile({
							url: _this.serverUrl + '/api.common/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'laytpUploadFile',
							header: {
								token: _this.token
							},
							success: (uploadFileRes) => {
								uni.hideLoading();
								var return_data = JSON.parse(uploadFileRes.data);
								if (return_data.code == 0) {
									_this.idCard2 = return_data.data.path;
								}
							},
							fail: function(e) {
								uni.hideLoading();
								console.log(e);
							}
						});
					}
				})
			},
			change: function(e) {
				this.needPploadedImgs = e;
				
				if(this.is_upload == 1){
					this.uploaded(this.needPploadedImgs);
				}
				
			},
			// 图片上传完毕执行 uploaded 函数
			uploaded: function(uploadedImgs) {
				let _this = this;
				console.log('图片上传完毕，开始提交数据');
				console.log(uploadedImgs);

				// 至此数据以及收集完毕
				// 请自己完成数据提交工作

				console.log('uploadedImgsLength', uploadedImgs.length);

				_this.needPploadedImgs.forEach((image, index) => {
					uni.uploadFile({
						url: _this.serverUrl + '/api.common/upload', //仅为示例，非真实的接口地址
						filePath: image.url,
						name: 'laytpUploadFile',
						header: {
							token: _this.token
						},
						success: (uploadFileRes) => {

							var return_data = JSON.parse(uploadFileRes.data);
							if (return_data.code == 0) {
								// console.log(221, i);

								_this.needPploadedImgs[index].progress = 100;
								_this.needPploadedImgs[index].url = return_data.data.path;
							} else {
								uni.showToast({
									title: return_data.msg,
									icon: 'error'
								})
							}
						},
						fail: function(e) {
							console.log(e);
							uni.showToast({
								title: '网络请求失败，请稍后重试',
								icon: 'error'
							})
						}
					});
				})


			},
			submit: function(e) {

				// console.log(this.needPploadedImgs);
				// return false;


				//进行表单验证 e.detail.value 内存放着表单数据




				var formData = e.detail.value;
				formData['sex'] = this.genderIndex;
				formData['feature'] = this.feature;

				formData['id_card_zheng'] = this.idCard1;
				formData['id_card_fan'] = this.idCard2;
				console.log(formData);

				if (this.idCard1 == this.id_card_zheng_img) {
					uni.showToast({
						title: "请上传身份证正面照片",
						icon: "none"
					});
					return;
				}

				if (this.idCard2 == this.id_card_fan_img) {
					uni.showToast({
						title: "请上传身份证反面照片",
						icon: "none"
					});
					return;
				}

				var needPploadedImgs = this.needPploadedImgs;
				if (needPploadedImgs.length < 1) {
					uni.showToast({
						title: "请选择生活照",
						icon: "none"
					});
					return;
				}
				var life_photo_arr = [];
				for (var i = 0; i < needPploadedImgs.length; i++) {
					life_photo_arr.push(needPploadedImgs[i].url);
				}

				formData['life_photos'] = life_photo_arr;


				// return false;



				let _this = this;
				_this.$refs.guipageloading.open();

				_this.graceJS.post(_this.serverUrl + '/api.teacher/qiutong_apply', formData, 'json', {
						token: _this.token
					}, (res) => {
						_this.$refs.guipageloading.close();
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: 'success',
								duration: 2000
							});

							uni.navigateTo({
								url: '/pages/my/index'
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'error'
							});
						}
					},
					(e) => {
						console.log(e);
						uni.showToast({
							title: '网络请求失败，请稍后再试',
							icon: 'error'
						});
						_this.$refs.guipageloading.close();
					})


			},
			pickerChange: function(e) {
				this.genderIndex = e.detail.value;
				// this.formData.name5 = this.gender[this.genderIndex];
			},
		}
	}
</script>
<style>
	.gui-idcard-main {
		margin: 25rpx;
	}

	.gui-idcard-desc {
		background-color: #FFFFFF;
		color: #666666;
		line-height: 56rpx;
		font-size: 26rpx;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.gui-idcard-text {
		line-height: 1.8em;
		margin-top: 30rpx;
		color: #666666;
	}

	.gui-idcard-items {
		background-color: #FFFFFF;
		padding: 50rpx;
		border-radius: 10rpx;
		margin-top: 15rpx;
	}

	.gui-idcard-items-image {
		width: 380rpx;
	}
</style>